<template>
  <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <i class="icon icon-modal-close" @click="close()"></i>
          <span class="modal-title">订购/续费</span>
        </div>
        <div class="modal-body">
          <div class="tab-container">
            <ul class="nav nav-tabs">
              <li class="narrow active">
                <a href="#order" data-toggle="tab" class="active">订购</a>
              </li>
              <li class="width">
                <a href="#renew" data-toggle="tab">续费</a>
              </li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="order">
                <div class="order-container">
                  <div class="group order-group">
                    <label>订购类型：</label>
                    <button class="btn btn-default" @click="changeOrderType(0)">
                      <i class="icon icon-check" v-if="orderType == 0"></i>基础版
                    </button>
                    <button class="btn btn-default" @click="changeOrderType(1)">
                      <i class="icon icon-check" v-if="orderType == 1"></i>标准版
                    </button>
                    <button class="btn btn-default" @click="changeOrderType(2)">
                      <i class="icon icon-check" v-if="orderType == 2"></i>
                      <span class="limit">限量发售</span>高级版
                    </button>
                  </div>
                  <table class="group table-inline table-stripe">
                    <thead>
                      <tr>
                        <th>分辨率</th>
                        <th>DPI</th>
                        <th>内存</th>
                        <th>flash</th>
                        <th>cpu</th>
                        <th>版本号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{{phone.px}}</td>
                        <td>{{phone.dpi}}</td>
                        <td>{{phone.capacity}}</td>
                        <td>{{phone.flash}}</td>
                        <td>{{phone.cpu}}</td>
                        <td>{{phone.version}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="group order-time">
                    <label>订购时间：</label>
                    <button class="btn btn-default" @click="changeOrderTime(0)">
                      <i class="icon icon-check" v-if="orderTime == 0"></i>1天2元
                    </button>
                    <button class="btn btn-default" @click="changeOrderTime(1)">
                      <i class="icon icon-check" v-if="orderTime == 1"></i>7天12元
                    </button>
                    <button class="btn btn-default" @click="changeOrderTime(2)">
                      <i class="icon icon-check" v-if="orderTime == 2"></i>30天38元
                    </button>
                  </div>
                  <div class="group order-count">
                    <label>订购数量：</label>
                    <input class="order-input" v-model="orderCount" type="number" max="99" min="0"> 台
                  </div>
                  <div class="group pay-type">
                    <label>支付方式：</label>
                    <button class="btn btn-default" @click="changePayType('zhifubao')">
                      <i class="icon icon-zhifubao"></i>支付宝支付
                      <i class="icon icon-check" v-if="payType == 'zhifubao'"></i>
                    </button>
                    <button class="btn btn-default" @click="changePayType('weixin')">
                      <i class="icon icon-weixin"></i>微信支付
                      <i class="icon icon-check" v-if="payType == 'weixin'"></i>
                    </button>
                  </div>
                </div>
              </div>
              <div class="tab-pane" id="renew">sssss</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="pay-count">
            支付金额：
            <span class="red">
              <strong>{{orderPay}}</strong>元
            </span>
          </div>
          <button type="button" class="btn btn-danger btn-sm" @click="close()">关闭</button>
          <button type="button" class="btn btn-primary btn-sm">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderType: 1,
      orderTime: 2,
      orderCount: 0,
      payType: null,
      phone: null,
      phoneData: [
        {
          px: "1280*720",
          dpi: "320",
          capacity: "2G",
          flash: "16G",
          cpu: "4核",
          version: "安卓7.1"
        },
        {
          px: "720*1280",
          dpi: "320",
          capacity: "3G",
          flash: "16G",
          cpu: "8核",
          version: "安卓4.4"
        },
        {
          px: "720*1280",
          dpi: "320",
          capacity: "3G",
          flash: "32G",
          cpu: "8核",
          version: "安卓6.0"
        }
      ]
    };
  },
  created() {
    this.phone = this.phoneData[1];
  },
  methods: {
    close() {
      this.$store.commit("setDialogStatus", {
        dialog: "orderDialog",
        isBoolean: false
      });
    },
    //订购类型
    changeOrderType(type) {
      this.orderType = type;
      this.phone = this.phoneData[type];
    },
    //订购时间
    changeOrderTime(type) {
      this.orderTime = type;
    },
    //付款方式
    changePayType(type) {
      this.payType = type;
    }
  },
  computed: {
    orderPay() {
      return this.orderCount * 123;
    }
  }
};
</script>

<style lang="scss" scoped>
$weixin: rgb(0, 187, 0);
$zhifubao: rgb(0, 168, 241);
$tab-border: #dee2e6;
$white-light: #f5f5f5;
$primary: #007bff;
$primary-shadow: rgba(82, 168, 236, 0.6);
.modal-title {
  margin-right: 10px;
}
.tab-container {
  box-sizing: border-box;
  border: 1px solid $tab-border;
}
.nav-tabs {
  line-height: 34px;
  li {
    border-right: 1px solid $tab-border;
    color: $primary;
    &:hover {
      color: $primary-shadow;
    }
    a {
      padding: 0px 10px;
      &.active {
        border-bottom: 2px solid $primary;
      }
    }
  }
}
.group {
  margin-bottom: 15px;
}
.order-container {
  padding: 20px;
}
.btn-default {
  position: relative;
  border: 1px solid $tab-border;
  margin-right: 5px;
  .icon-check {
    position: absolute;
    bottom: -5px;
    right: 0;
    &:before {
      color: $primary;
      content: "\e602";
      font-size: 20px;
    }
  }
  .limit {
    position: absolute;
    top: -20px;
    padding: 0 2px;
    right: 0;
    font-weight: bold;
    font-size: 13px;
    background-color: orange;
    color: white;
  }
  .icon-zhifubao {
    margin-right: 5px;
    &:before {
      color: $zhifubao;
      content: "\e647";
      font-size: 25px;
    }
  }
  .icon-weixin {
    margin-right: 5px;
    &:before {
      color: $weixin;
      content: "\e63d";
      font-size: 25px;
    }
  }
}
.limit {
  position: absolute;
  top: 0;
}
.table-inline {
  width: 80%;
  margin-left: 11%;
}
.pay-count {
  position: absolute;
  left: 10px;
}
.order-input{
  margin-top: 1px;
}
</style>